<!--
    @author: wzc
    @description:自定义标题（推荐使用uview的u-navbar）
-->
<template>
    <view>
        <view style="height: 90rpx"></view>
        <view class="titleBar">
            <image class="backIcon" v-if="isShowBack" src="../../static/images/arrow_back.png" @click="onBackClick"
                   mode="scaleToFill"/>
            <view v-else></view>
            <view class="titleTxt">{{ title }}</view>
            <view class="titleSubTxt"@click="onSubTitleClick">{{ subTitle }}</view>
        </view>
    </view>
</template>

<script>
export default {
    name: "c-titleBar",
    props:{
        isShowBack:{
            type: Boolean,
            default: true
        },
        title:{
            type: String,
            default: ""
        },
        subTitle:{
            type: String,
            default: ""
        }
    },
    emits: [],
    data() {
        return {};
    },
    mounted() {

    },
    methods: {
        /**
         * 返回
         */
        onBackClick() {
            uni.navigateBack()
        },
        /**
         * 子标题点击
         */
        onSubTitleClick() {
            this.$emit("subTitleClick")
        },
    },
};
</script>

<style scoped lang="scss">
.titleBar {
    width: 100%;
    height: 90rpx;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 30rpx;
}

.backIcon {
    width: 32rpx;
    height: 32rpx;
    cursor: pointer;
}

.titleTxt {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    letter-spacing: 1rpx;
}

.titleSubTxt {
    font-size: 28rpx;
    color: #666666;
    letter-spacing: 1rpx;
}
</style>